<#import "../main.html" as page>
    <@page.main current="/testPage" title="RGB颜色值">

    <style type="text/css">
        .divCondition {
            margin-bottom: 10px;
        }

        .divPage td {
            padding: 50px;
        }

        .divInput {
            width: 280px;
            padding: 30px 50px;
            transition: 0.5s;
        }

        input {
            outline: none;
        }

        .result {
            box-shadow: 0 0 10px #fff;
            border: none;
        }

        .w85 {
            width: 85px;
        }

        .bsred {
            box-shadow: 0 0 10px red;
        }
    </style>

    <div class="divPage">
        <div class="divTitleText"></div>
        <div>
            <p>十六进制颜色：<input type="text" id="txtHex" class="w85" value="#" maxlength="7" /></p>
            <div class="divInput mr50" id="divInputHex">
                <input type="text" id="txtHexResult" class="w85 result rd5" readonly="readonly" maxlength="6" />
            </div>
        </div>
        <div class="mt50">
            <p>
                RGB颜色：
                <input type="text" id="txtR" maxlength="3" class="txtRgb w25 txtIn" />
                <input type="text" id="txtG" maxlength="3" class="txtRgb w25 txtIn" />
                <input type="text" id="txtB" maxlength="3" class="txtRgb w25 txtIn" />
            </p>
            <div class="divInput" id="divInputRgb">
                <input type="text" id="txtRgbResult" class="w85 result rd5" readonly="readonly" />
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $("#txtHex").keypress(function (e) {
            if ("0123456789abcdefABCDEF".indexOf(e.key) < 0) {
                return false;
            }
        });
        $("#txtHex").bind("keyup", function (e) {
            var input = $(this).val();
            if (input != "") {
                if (input[0] != "#") {
                    $(this).val('#' + input);
                }
            } else {
                $("#divInputHex").css("background-color", "#fff");
                $("#txtHexResult").val("");
                $(this).removeClass("bsred");
                return;
            }

            if (!showRgb()) {
                $(this).addClass("bsred");
                $("#divInputHex").css("background-color", "#fff");
                $("#txtHexResult").val("");
            } else {
                $(this).removeClass("bsred");
            }
        });

        function showRgb() {
            var a = $("#txtHex").val();
            if (a.substr(0, 1) == "#")
                a = a.substring(1);
            if (a.length != 6)
                return false;
            $("#divInputHex").css("background-color", "#" + a);
            a = a.toLowerCase();
            b = new Array();
            for (x = 0; x < 3; x++) {
                b[0] = a.substr(x * 2, 2)
                b[3] = "0123456789abcdef"; b[1] = b[0].substr(0, 1)
                b[2] = b[0].substr(1, 1)
                b[20 + x] = b[3].indexOf(b[1]) * 16 + b[3].indexOf(b[2])
            }
            $("#txtHexResult").val(b[20] + "," + b[21] + "," + b[22]);
            return true;
        }

        //强制输入格式为0-255的数字
        $(".txtRgb").keypress(function (e) {
            if (e.key == " ") {
                return false;
            }
            if (!IsNumber(e.key)) {
                return false;
            }
            var result = $(this).val() + e.key;
            if (result > 255) {
                return false;
            }
        });

        $(".txtRgb").bind("keyup", function (e) {
            if ($(this).val() == "") {
                $(this).addClass("bsred");
                $("#txtRgbResult").val("");
                $("#divInputRgb").css("background-color", "#fff");
                return;
            } else {
                $(".txtRgb").removeClass("bsred")
            }

            if (!showHex()) {
                $(".txtRgb").addClass("bsred");
                $("#txtRgbResult").val("");
                $("#divInputRgb").css("background-color", "#fff");
            } else {
                $(".txtRgb").removeClass("bsred")
            }
        });
        function showHex() {
            var hexcode = '';
            for (x = 0; x < 3; x++) {
                var n = $(".txtRgb").eq(x).val();
                if (n == "") return false;
                if (parseInt(n) != n) {
                    return false;
                }
                if (n > 255)
                    return false;
                var c = "0123456789ABCDEF", b = "", a = n % 16;
                b = c.substr(a, 1);
                a = (n - a) / 16;
                hexcode += c.substr(a, 1) + b
            }
            $("#txtRgbResult").val("#" + hexcode);
            $("#divInputRgb").css("background-color", "#" + hexcode);
            return true;
        }

    </script>
</@page.main>